.ele-status-dot {
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;

  .ele-dot-text {
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

.ele-dot {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  position: relative;

  & > span {
    display: none;
  }

  &.ele-dot-ripple > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    animation: eleAnimStatusDot 1.2s ease-in-out infinite;
  }
}

@keyframes eleAnimStatusDot {
  from {
    transform: scale(0.8);
    opacity: 0.6;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}
